<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>用户管理</title>
  <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>

<body>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th v-for="site in sites">{{ site.text }}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td v-for="site in sites">{{ site.value }}</td>
        </tr>
      </tbody>
    </table>

  </div>
  <script>
    const app = {
      data() {
        return {
          sites: [
            { text: '姓名', value: '黄晓明' },
            { text: '性别', value: '男' },
            { text: '年龄', value: 36 }
          ]
        }
      }
    }

    Vue.createApp(app).mount('#app')
  </script>
  <style>
    table {
      width: 40%;
      border-collapse: collapse;
      border-spacing: 0;
      empty-cells: show;
      border: 1px solid #e9e9e9;
    }

    table th {
      background: #f7f7f7;
      color: #5c6b77;
      font-weight: 600;
      white-space: nowrap;
    }

    table td,
    table th {
      padding: 8px 16px;
      border: 1px solid #e9e9e9;
      text-align: left;
    }
  </style>
</body>

</html>